<?php include "../public/header.php"?>
<style>
    .deptdiv{width: 70%;background-color: #FFFFFF;}
    .deptdiv .tit{font-size: 14px;line-height: 40px;height:40px;border-bottom: 1px solid #E4E4E4}
    .deptdiv .tit i{margin: 0 5px 0 8px}
    .gangdiv{width: 29%;background-color: #FFFFFF;}
    .gangdiv .tit{font-size: 14px;line-height: 40px;height:40px;border-bottom: 1px solid #E4E4E4}
    .gangdiv .tit i{margin: 0 5px 0 8px}
    .deptseadiv{display: none}
    .deptseadiv #deptkeyword{margin: 10px}
    .deptseadiv #deptseabutton{background-color: #409EFF;position:absolute;top: 11px;height: 30px;line-height: 30px;}
    .deptall{cursor: pointer;}
    .deptmovedown{display: none}
    .gangseadiv{display: none}
    .gangseadiv #gangkeyword{margin: 10px}
    .gangseadiv #gangseabutton{background-color: #409EFF;position:absolute;top: 11px;border-radius: 4px;height: 36px;line-height: 36px;}
    .gangall{cursor: pointer;}
    .gangmoveup{display: none}

    /* zdy主题风格*/
    .dtree-zdy-item-this{background-color: #409EFF!important;color: #FFFFFF;} /* 当前选中行样式*/
    .dtree-zdy-item-this .dtree-zdy-icon{color: #FFFFFF!important;} /* 当前选中行样式*/
    .dtree-zdy-item-this .dtree-zdy-ficon{color: #FFFFFF!important;} /* 当前选中行样式*/
    /*.dtree-zdy-item:hover{background-color: #409EFF!important;color: #FFFFFF;} !* 行悬停样式*!*/
    .dtree-zdy-item cite{font-size:14px!important;} /* 行文字样式*/
    /*.dtree-zdy-item:hover cite{color:#409EFF!important;} !* 行悬停文字样式*!*/
    .dtree-zdy-dtreefont{font-size: 18px!important;} /* 一级图标、二级图标、复选框样式*/
    .dtree-zdy-ficon{color:#409EFF!important;}  /*一级图标特定样式*/
    .dtree-zdy-icon{color:#409EFF!important;}  /*二级图标特定样式*/
    .dtree-zdy-checkbox:hover{color:#409EFF!important;}  /*复选框悬停样式*/
    .dtree-zdy-choose{color:#409EFF!important;} /* 复选框选中样式*/

    .dept_jigou{color: #FF5722;margin-left: 5px}

    #emptycheck{cursor: pointer;}
    #emptycheck i{margin: 0;font-size: 16px}

    .tanchuangxian{overflow-y: auto;width: 100%}
    .tanchuangxian::-webkit-scrollbar {width: 0;}
    .tanchuangxian .tags {border: 1px solid #409EFF;max-width: 160px;height: 30px;line-height: 30px;margin-top: 10px;margin-left: 10px;border-radius: 5px;padding: 0 5px;color: #409EFF;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
    .tanchuangxian .tags div {width: 130px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;float: left;}
    .tanchuangxian .tags i {font-size: 15px;cursor: pointer;}
    #deptToolbarDiv::-webkit-scrollbar {width: 0;}
</style>
<body class="dialogPage">
<div id="dialog">
    <div class="page-title" id="page-title">
        <div class="page-title-con">
            <span class="title tabtit">选择</span>
            <div class="move_title"></div>
            <div class="page-title-opt-list">
                <button type="button" class="layui-btn layui-btn-sm btn-dark marginr5" lay-submit="" lay-filter="add">确定</button>
                <span id="page-close" class="page-close" onclick="layer_close()">×</span>
            </div>
        </div>
    </div>

    <div class="layui-fluid">
        <div class="layuimini-container">
            <div class="deptdiv float-l hei">
                <div class="tit">
                    <div class="float-l"><i class="fa fa-users colorlan"></i> <b>选择</b></div>
                    <div class="float-r">
                        <a class="deptall deptmovedown" dtree-id="deptTree" dtree-menu="moveDown">展开<i class="fa fa-chevron-down"></i></a>
                        <a class="deptall deptmoveup" dtree-id="deptTree" dtree-menu="moveUp">收起<i class="fa fa-chevron-up"></i></a>
                    </div>
                </div>
                <div class="layui-inline deptseadiv">
                    <div class="layui-input-inline">
                        <input type="text" id="deptkeyword" onkeydown="keyTableSearch()" placeholder="关键字" autocomplete="off" class="layui-input">
                    </div>
                    <button type="button" id="deptseabutton" class="layui-btn">查 询</button>
                </div>
                <div style="overflow: auto;" id="deptToolbarDiv">
                    <ul id="deptTree" class="dtree" data-id="0"></ul>
                </div>
            </div>
            <form class="layui-form" lay-filter="form-add">
                <div class="gangdiv float-r hei">
                    <div class="tit" style="padding: 0 10px">
                        <div class="float-l"><b>已选择</b></div>
                        <div class="float-r colorhong" id="emptycheck">
                            <i class="fa fa-trash"></i> <b>清空</b>
                        </div>
                    </div>
                    <div>
                        <div class="tanchuangxian"></div>
                        <!--<div class="tags"><div title="1111">1张三三卡</div> <i class="layui-icon" onclick="closeTanTag(this)">&#x1006;</i></div>-->
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>

    var parent_dom = getQueryVariable('dom');
    var parent_type = getQueryVariable('type') || 'user';  //  user-选择用户  dept-选择部门  part-选择部门或用户
    if(parent_type != 'user' && parent_type != 'dept' && parent_type != 'part'){
        parent_type = 'user';
    }
    var parent_single = getQueryVariable('single') || 1;  //  single   1-单选  2-多选
    if(parent_single != 1 && parent_single != 2){
        parent_single = 1;
    }

    var parent_index = getQueryVariable('index'); // 明细中使用
    var parent_page = getQueryVariable('page'); // 页面

    var singleName = parent_single == 1 ? '单选' : '多选';

    var parent_dept = getQueryVariable('dept') || ''; // 如要单独选择单位  参数dept=chan   其他-无需此参数

    if(parent_type === 'user'){
        $(".tabtit").text('选择用户'+'（'+singleName+'）')
    }
    if(parent_type === 'dept'){
        $(".tabtit").text('选择部门'+'（'+singleName+'）')
    }
    if(parent_type === 'part'){
        $(".tabtit").text('选择部门或用户'+'（'+singleName+'）')
    }


    layui.use(['dtree','layer','jquery','form','laytp'],function() {
        var dtree = layui.dtree, layer = layui.layer, $ = layui.jquery, form = layui.form;
        DeptTree = dtree.render({
            elem: "#deptTree",
            url: server_api_name+ask_opt_get_userpart,
            request: {token: facade.getCookie('token'),type:parent_type, dept:parent_dept},
            width: '100%',
            height: document.documentElement.clientHeight*0.75-60,
            line: true,
            skin: "zdy",
            initLevel: 99,
            nodeIconArray:[],
            leafIconArray:[],
            iconfont:["dtreefont", "layui-icon", "iconfont"],
            iconfontStyle:[{fnode:{leaf:""},snode:{node:{open:"",close:""},leaf: "",}}],
            scroll:"#deptToolbarDiv",
            toolbarShow:[],
            menubar:true,
            menubarTips:{group:[]},
            success: function(data, obj, first){
                var dataArr = getIdByChildren(data.data, []);
                var insertArr = {dept:[],user:[]};
                for (var key in dataArr){
                    $('#'+parent_dom+' .tags', parent.document).each(function () {
                        var existId = $(this).children('div').attr('data-id');
                        var part = $(this).children('div').attr('data-part');
                        if(dataArr[key].id == existId && dataArr[key].part == part){
                            if(!in_array(existId, insertArr[part])){
                                insertArr[part].push(existId);
                                $(".tanchuangxian").append(create_tags(dataArr[key]));
                            }
                        }
                    });
                }
            }
        });
        //左键单击事件
        dtree.on("node('deptTree')" ,function(obj){
            var data = obj.param.basicData;
            if(parent_type == 'user' && data.part != 'user'){
                return false;
            }
            if(parent_type == 'dept' && data.part != 'dept'){
                return false;
            }
            var str = create_tags(data);

            if(parent_single == 1){
                $(".tanchuangxian").html(str);
            }else{
                $('.tanchuangxian .tags').each(function () {
                    var part = $(this).children('div').attr('data-part');
                    var dataId = $(this).children('div').attr('data-id');
                    if(data.part == part && dataId == data.id){
                        $(this).remove();
                    }
                });
                $(".tanchuangxian").append(str);
            }
        });
        //搜索部门
        $("#deptseabutton").click(function(){
            var keyword = $("#deptkeyword").val();
            DeptTree.fuzzySearch(keyword);
        });

        form.on('submit(add)', function(){
            var str = $(".tanchuangxian").html();

            if(parent_page === 'bid_task_general'){ // 通用任务
                var val = $('.tanchuangxian .tags div').attr('title');
                var id = $('.tanchuangxian .tags div').attr('data-id');
                if(parent_index){
                    $('.'+parent_dom, parent.document).eq(parent_index - 1).val(val).attr('key',id);
                }else{
                    $('#'+parent_dom, parent.document).val(id);
                    $('#'+parent_dom+'_name', parent.document).val(val);
                }

            }else if(parent_page === 'asset'){ // 通用任务
                var val = $('.tanchuangxian .tags div').attr('title');
                var id = $('.tanchuangxian .tags div').attr('data-id');
                $('.'+parent_dom, parent.document).eq(parent_index - 1).val(val).attr('key',id);

            }else if(parent_page === 'mulcert'){ // 证书批量添加
                $('.'+parent_dom, parent.document).eq(parent_index).html(str)

            }else{
                $('#'+parent_dom, parent.document).html(str);

                if($('#'+parent_dom+'_tanerror', parent.document).length > 0){
                    if(!str){
                        $("#"+parent_dom, parent.document).parents('.tanxian').addClass('tanerror');
                        $('#'+parent_dom+'_tanerror', parent.document).text('请选择');
                    }else{
                        $("#"+parent_dom, parent.document).parents('.tanxian').removeClass('tanerror');
                        $('#'+parent_dom+'_tanerror', parent.document).text('');
                    }
                }
            }

            if(parent_page === 'user_take_call'){
                if (typeof(window.parent.get_con_arr)!="undefined"){
                    window.parent.get_con_arr();
                }
            }
            layer_close();
            return false;
        });
    });




    function keyTableSearch() {
        if (event.keyCode == 13) {
            var keyword = $("#deptkeyword").val();
            DeptTree.fuzzySearch(keyword);
        }
    }

    function create_tags(data){
        var str = '<div class="tags">';
        str += '<div ' +
            'title="'+data.name+'" '+
            'data-id="'+data.id+'" '+
            'data-part="'+data.part+'" '+
            '>';
        str += data.name+'</div>';
        str += '<i class="layui-icon" onclick="closeTanTag(this)">&#x1006;</i></div>';
        return str;
    }

    function closeTanTag(obj) {
        $(obj).parent('div.tags').remove();
    }

    $(".deptmovedown").click(function () {
        $(this).hide();
        $(".deptmoveup").show();
    });

    $(".deptmoveup").click(function () {
        $(this).hide();
        $(".deptmovedown").show();
    });

    $("#emptycheck").click(function () {
        $(".tanchuangxian").html('');
    });


    var deptkeyword = $(".deptdiv").width()-100;
    $("#deptkeyword").attr('style', "width:"+deptkeyword+'px');
    $(".deptseadiv").show();


    function getIdByChildren(data, Arr) {
        for (var key in data){
            if(data[key].basicData){
                Arr.push(data[key].basicData);
            }
            if(data[key].children){
                getIdByChildren(data[key].children, Arr);
            }
        }
        return Arr;
    }



    $(".hei").css('height',document.documentElement.clientHeight-90);
    $(".tanchuangxian").css('height',document.documentElement.clientHeight-140);
</script>
</body>
</html>
